<div class="mdc-chip-set" role="grid">
  <div class="mdc-chip" role="row">
    <div class="mdc-chip__ripple"></div>
    <span role="gridcell">
      <span role="button" tabindex="0" class="mdc-chip__primary-action">
        <span class="mdc-chip__text">Chip One</span>
      </span>
    </span>
  </div>
  <div class="mdc-chip" role="row">
    <div class="mdc-chip__ripple"></div>
    <span role="gridcell">
      <span role="button" tabindex="-1" class="mdc-chip__primary-action">
        <span class="mdc-chip__text">Chip Two</span>
      </span>
    </span>
  </div>
  ...
</div>

Styles

@use "@material/chips/mdc-chips";

JavaScript Instantiation

import {MDCChipSet} from '@material/chips';
const chipSetEl = document.querySelector('.mdc-chip-set');
const chipSet = new MDCChipSet(chipSetEl);

See Importing the JS component for more information on how to import JavaScript.

Variants

Leading and Trailing Icons

You can optionally add a leading icon (i.e. thumbnail) and/or a trailing "remove" icon to a chip. To add an icon, add an i element with your preferred icon, give it a class of mdc-chip__icon, and a class of either mdc-chip__icon--leading or mdc-chip__icon--trailing.

We recommend using Material Icons from Google Fonts:

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>

However, you can also use SVG, Font Awesome, or any other icon library you wish.

Leading icon

<div class="mdc-chip" role="row">
  <div class="mdc-chip__ripple"></div>
  <i class="material-icons mdc-chip__icon mdc-chip__icon--leading">event</i>
  <span role="gridcell">
    <span role="button" tabindex="0" class="mdc-chip__primary-action">
      <span class="mdc-chip__text">Add to calendar</span>
    </span>
  </span>
</div>

Trailing icon

A trailing icon comes with the functionality to remove the chip from the set. If you're adding a trailing icon, also set tabindex="0" and role="button" to make it accessible by keyboard and screenreader. Trailing icons should only be added to input chips.

<div class="mdc-chip" role="row">
  <div class="mdc-chip__ripple"></div>
  <span role="gridcell">
    <span role="button" tabindex="0" class="mdc-chip__primary-action">
      <span class="mdc-chip__text">Jane Smith</span>
    </span>
  </span>
  <span role="gridcell">
    <i class="material-icons mdc-chip__icon mdc-chip__icon--trailing" tabindex="-1" role="button">cancel</i>
  </span>
</div>

Choice Chips

Choice chips are a variant of chips which allow single selection from a set of options. To define a set of chips as choice chips, add the class mdc-chip-set--choice to the chip set element.

<div class="mdc-chip-set mdc-chip-set--choice" role="grid">
  ...
</div>

Filter Chips

Filter chips are a variant of chips which allow multiple selection from a set of options. To define a set of chips as filter chips, add the class mdc-chip-set--filter to the chip set element. When a filter chip is selected, a checkmark appears as the leading icon. If the chip already has a leading icon, the checkmark replaces it. This requires the HTML structure of a filter chip to differ from other chips:

<div class="mdc-chip-set mdc-chip-set--filter" role="grid">
  <div class="mdc-chip" role="row">
    <div class="mdc-chip__ripple"></div>
    <span class="mdc-chip__checkmark" >
      <svg class="mdc-chip__checkmark-svg" viewBox="-2 -3 30 30">
        <path class="mdc-chip__checkmark-path" fill="none" stroke="black"
              d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
      </svg>
    </span>
    <span role="gridcell">
      <span role="checkbox" tabindex="0" aria-checked="false" class="mdc-chip__primary-action">
        <span class="mdc-chip__text">Filterable content</span>
      </span>
    </span>
  </div>
  ...
</div>

To use a leading icon in a filter chip, put the mdc-chip__icon--leading element before the mdc-chip__checkmark element:

<div class="mdc-chip-set mdc-chip-set--filter" role="grid">
  <div class="mdc-chip" role="row">
    <div class="mdc-chip__ripple"></div>
    <i class="material-icons mdc-chip__icon mdc-chip__icon--leading">face</i>
    <span class="mdc-chip__checkmark" >
      <svg class="mdc-chip__checkmark-svg" viewBox="-2 -3 30 30">
        <path class="mdc-chip__checkmark-path" fill="none" stroke="black"
              d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
      </svg>
    </span>
    <span role="gridcell">
      <span role="checkbox" tabindex="0" aria-checked="false" class="mdc-chip__primary-action">
        <span class="mdc-chip__text">Filterable content</span>
      </span>
    </span>
  </div>
  ...
</div>

Input Chips

Input chips are a variant of chips which enable user input by converting text into chips. To define a set of chips as input chips, add the class mdc-chip-set--input to the chip set element.

<div class="mdc-chip-set mdc-chip-set--input" role="grid">
  ...
</div>

Adding Chips to the DOM

The MDC Chips package does not handle the process of converting text into chips, in order to remain framework-agnostic. The MDCChipSet component exposes an addChip method, which accepts an element which is expected to already be inserted within the Chip Set element after any existing chips. The MDCChipSet component will then handle creating and tracking a MDCChip component instance.

For example:

input.addEventListener('keydown', function(event) {
  if (event.key === 'Enter' || event.keyCode === 13) {
    const chipEl = document.createElement('div');
    // ... perform operations to properly populate/decorate chip element ...
    chipSetEl.appendChild(chipEl);
    chipSet.addChip(chipEl);
  }
});

NOTE: MDCChipSet will generate a unique ID to apply to each added chip's element if it does not already have an ID when it is passed to addChip. This is used to distinguish chips during user interactions.

Removing Chips from the DOM

By default, input chips are removed in response to clicking the trailing remove icon in the chip. Removal can also be triggered by calling MDCChip's beginExit() method.

Individual MDCChip instances will emit a MDCChip:removal event once the exit transition ends. MDCChipSet will handle destroying the MDCChip instance in response to MDCChip:removal, but it must be removed from the DOM manually. You can listen for MDCChip:removal from the parent Chip Set or any ancestor, since the event bubbles:

chipSet.listen('MDCChip:removal', function(event) {
  chipSetEl.removeChild(event.detail.root);
});

Pre-selected

To display a pre-selected filter or choice chip, add the class mdc-chip--selected to the root chip element.

<div class="mdc-chip-set mdc-chip-set--choice" role="grid">
  <div class="mdc-chip mdc-chip--selected" role="row">
    <div class="mdc-chip__ripple"></div>
    <span role="gridcell">
      <span role="radio" tabindex="0" aria-checked="true" class="mdc-chip__primary-action">
        <span class="mdc-chip__text">Add to calendar</span>
      </span>
    </span>
  </div>
</div>

To pre-select filter chips that have a leading icon, also add the class mdc-chip__icon--leading-hidden to the mdc-chip__icon--leading element. This will ensure that the checkmark displaces the leading icon.

<div class="mdc-chip-set mdc-chip-set--filter" role="grid">
  <div class="mdc-chip mdc-chip--selected" role="row">
    <div class="mdc-chip__ripple"></div>
    <i class="material-icons mdc-chip__icon mdc-chip__icon--leading mdc-chip__icon--leading-hidden">face</i>
    <span class="mdc-chip__checkmark">
      <svg class="mdc-chip__checkmark-svg" viewBox="-2 -3 30 30">
        <path class="mdc-chip__checkmark-path" fill="none" stroke="black"
              d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
      </svg>
    </span>
    <span role="gridcell">
      <span role="checkbox" tabindex="0" aria-checked="true" class="mdc-chip__primary-action">
        <span class="mdc-chip__text">Filterable content</span>
      </span>
    </span>
  </div>
</div>

Additional Information

Accessibility

Material Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your chip:

<div class="mdc-touch-target-wrapper">
  <div class="mdc-chip mdc-chip--touch">
    <div class="mdc-chip__ripple"></div>
    <span role="gridcell">
      <span role="button" tabindex="0" class="mdc-chip__primary-action">
        <div class="mdc-chip__touch"></div>
        <span class="mdc-chip__text">Chip One</span>
      </span>
    </span>
  </div>
</div>

Note that the outer mdc-touch-target-wrapper element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).

Style Customization

CSS Classes

CSS Class	Description
`mdc-chip-set`	Mandatory. Indicates the set that the chip belongs to.
`mdc-chip-set--input`	Optional. Indicates that the chips in the set are input chips, which enable user input by converting text into chips.
`mdc-chip-set--choice`	Optional. Indicates that the chips in the set are choice chips, which allow a single selection from a set of options.
`mdc-chip-set--filter`	Optional. Indicates that the chips in the set are filter chips, which allow multiple selection from a set of options.
`mdc-chip`	Mandatory.
`mdc-chip__ripple`	Mandatory. Indicates the element which shows the ripple styling.
`mdc-chip--selected`	Optional. Indicates that the chip is selected.
`mdc-chip__text`	Mandatory. Indicates the text content of the chip.
`mdc-chip__icon`	Optional. Indicates an icon in the chip. We recommend using Material Icons from Google Fonts.
`mdc-chip__icon--leading`	Optional. Indicates a leading icon in the chip.
`mdc-chip__icon--leading-hidden`	Optional. Hides the leading icon in a filter chip when the chip is selected.
`mdc-chip__icon--trailing`	Optional. Indicates a trailing icon which removes the chip from the DOM. Only use with input chips.
`mdc-chip__checkmark`	Optional. Indicates the checkmark in a filter chip.
`mdc-chip__checkmark-svg`	Mandatory with the use of `mdc-chip__checkmark`. Indicates the checkmark SVG element in a filter chip.
`mdc-chip__checkmark-path`	Mandatory with the use of `mdc-chip__checkmark`. Indicates the checkmark SVG path in a filter chip.

NOTE: Every element that has an mdc-chip__icon class must also have either the mdc-chip__icon--leading or mdc-chip__icon--trailing class.

mdc-chip__action--primary | Mandatory. Placed on the mdc-chip__text element. mdc-chip__action--trailing | Optinoal. Placed on the mdc-chip__icon--trailing when it should be accessible via keyboard navigation. mdc-chip--deletable | Optional. Indicates that the chip should be removable by the delete or backspace key.

Sass Mixins

Mixin	Description
`set-spacing($gap-size)`	Customizes the amount of space between each chip in the set
`shape-radius($radius, $rtl-reflexive)`	Sets the rounded shape to chip with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.
`fill-color-accessible($color)`	Customizes the background fill color for a chip, and updates the chip's ink, icon and ripple colors to meet accessibility standards
`fill-color($color)`	Customizes the background fill color for a chip
`ink-color($color)`	Customizes the text ink color for a chip, and updates the chip's ripple color to match
`selected-ink-color($color)`	Customizes text ink and ripple color of a chip in the selected state
`outline($width, $style, $color)`	Customizes the outline properties for a chip
`outline-width($width, $horizontal-padding)`	Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `horizontal-padding` is also included with a custom value
`outline-style($style)`	Customizes the outline style for a chip
`outline-color($color)`	Customizes the outline color for a chip
`height($height)`	Customizes the height for a chip
`horizontal-padding($padding)`	Customizes the horizontal padding for a chip
`leading-icon-color($color, $opacity)`	Customizes the color of a leading icon in a chip, optionally customizes opacity
`trailing-icon-color($color, $opacity, $hover-opacity, $focus-opacity)`	Customizes the color of a trailing icon in a chip, optionally customizes regular/hover/focus opacities
`leading-icon-size($size)`	Customizes the size of a leading icon in a chip
`trailing-icon-size($size)`	Customizes the size of a trailing icon in a chip
`leading-icon-margin($left-margin, $right-margin)`	Customizes the margin of a leading icon in a chip
`trailing-icon-margin($left-margin, $right-margin)`	Customizes the margin of a trailing icon in a chip
`elevation-transition()`	Adds a MDC elevation transition to the chip. This should be used instead of setting transition with `mdc-elevation-transition-value()` directly when a box shadow transition is desired for a chip
`density($density-scale)`	Sets density scale for chip. Supported density scales are `-2`, `-1` and `0` (default).

NOTE: mdc-chip-set-spacing also sets the amount of space between a chip and the edge of the set it's contained in.

`MDCChip` and `MDCChipSet` Properties and Methods

The MDC Chips package is composed of two JavaScript classes:

MDCChip defines the behavior of a single chip.
MDCChipSet defines the behavior of chips within a specific set. For example, chips in an input chip set behave differently from those in a filter chip set.

To use the MDCChip and MDCChipSet classes, import both classes from @material/chips.

`MDCChip`

Method Signature	Description
`beginExit() => void`	Proxies to the foundation's `beginExit` method
`focusPrimaryAction() => void`	Proxies to the foundation's `focusPrimaryAction` method
`focusTrailingAction() => void`	Proxies to the foundation's `focusTrailingAction` method
`removeFocus() => void`	Proxies to the foundation's `removeFocus` method
`setSelectedFromChipSet(selected: boolean) => void`	Proxies to the foundation's `setSelectedFromChipset` method (only called from the chip set)

Property	Value Type	Description
`id`	`string` (read-only)	Unique identifier on the chip*
`selected`	`boolean`	Proxies to the foundation's `isSelected`/`setSelected` methods
`shouldRemoveOnTrailingIconClick`	`boolean`	Proxies to the foundation's `getShouldRemoveOnTrailingIconClick`/`setShouldRemoveOnTrailingIconClick` methods**
`ripple`	`MDCRipple` (read-only)	The `MDCRipple` instance for the root element that `MDCChip` initializes

*NOTE: This will be the same as the id attribute on the root element. If an id is not provided, a unique one will be generated by MDCChipSet.addChip().

**NOTE: If shouldRemoveOnTrailingIconClick is set to false, you must manually call beginExit() on the chip to remove it.

Events

Event Name	`event.detail`	Description
`MDCChip:interaction`	`{chipId: string}`	Indicates the chip was interacted with (via click/tap or Enter key)
`MDCChip:selection`	`{chipId: string, selected: boolean}`	Indicates the chip's selection state has changed (for choice/filter chips)
`MDCChip:removal`	`{chipId: string, removedAnnouncement: string	null}`
`MDCChip:trailingIconInteraction`	`{chipId: string}`	Indicates the chip's trailing icon was interacted with (via click/tap or Enter key)
`MDCChip:navigation`	`{chipId: string, key: string, source: FocusSource}`	Indicates a navigation event has occurred on a chip

NOTE: All of MDCChip's emitted events bubble up through the DOM.

`MDCChipSet`

Method Signature	Description
`addChip(chipEl: Element) => void`	Adds a new `MDCChip` instance to the chip set based on the given `mdc-chip` element

Property	Value Type	Description
`chips`	`ReadonlyArray<MDCChip>`	An array of the `MDCChip` objects that represent chips in the set
`selectedChipIds`	`ReadonlyArray<string>`	An array of the IDs of all selected chips

Usage within Web Frameworks

If you are using a JavaScript framework, such as React or Angular, you can create Chips for your framework. Depending on your needs, you can use the Simple Approach: Wrapping MDC Web Vanilla Components, or the Advanced Approach: Using Foundations and Adapters. Please follow the instructions here.

Adapters: `MDCChipAdapter` and `MDCChipSetAdapter`

See chip/component.ts and chip-set/component.ts for vanilla DOM implementations of these adapter APIs for reference.

`MDCChipAdapter`

Method Signature	Description
`addClass(className: string) => void`	Adds a class to the root element
`removeClass(className: string) => void`	Removes a class from the root element
`hasClass(className: string) => boolean`	Returns true if the root element contains the given class
`addClassToLeadingIcon(className: string) => void`	Adds a class to the leading icon element
`removeClassFromLeadingIcon(className: string) => void`	Removes a class from the leading icon element
`eventTargetHasClass(target: EventTarget, className: string) => boolean`	Returns true if target has className, false otherwise
`notifyInteraction() => void`	Notifies the Chip Set that the chip has been interacted with*
`notifySelection(selected: boolean, chipSetShouldIgnore: boolean) => void`	Notifies the Chip Set that the chip has been selected or deselected**. When `chipSetShouldIgnore` is `true`, the chip set does not process the event.
`notifyTrailingIconInteraction() => void`	Notifies the Chip Set that the chip's trailing icon has been interacted with*
`notifyRemoval() => void`	Notifies the Chip Set that the chip will be removed***
`getComputedStyleValue(propertyName: string) => string`	Returns the computed property value of the given style property on the root element
`setStyleProperty(propertyName: string, value: string) => void`	Sets the property value of the given style property on the root element
`hasLeadingIcon() => boolean`	Returns whether the chip has a leading icon
`getRootBoundingClientRect() => ClientRect`	Returns the bounding client rect of the root element
`getCheckmarkBoundingClientRect() => ClientRect \| null`	Returns the bounding client rect of the checkmark element or null if it doesn't exist
`notifyNavigation(key: string, source: EventSource) => void`	Notifies the Chip Set that a navigation event has occurred
`setPrimaryActionAttr(attr: string, value: string) => void`	Sets an attribute on the primary action element to the given value
`focusPrimaryAction() => void`	Gives focus to the primary action element
`hasTrailingAction() => boolean`	Returns `true` if the chip has a trailing action element
`setTrailingActionAttr(attr: string, value: string) => void`	Sets an attribute on the trailing action element to the given value, if the element exists
`focusTrailingAction() => void`	Gives focus to the trailing action element if present
`getAttribute(attr: string) => string	null`

*NOTE: notifyInteraction and notifyTrailingIconInteraction must pass along the target chip's ID, and must be observable by the parent mdc-chip-set element (e.g. via DOM event bubbling).

**NOTE: notifySelection must pass along the target chip's ID and selected state, and must be observable by the parent mdc-chip-set element (e.g. via DOM event bubbling).

***NOTE: notifyRemoval must pass along the target chip's ID and its root element, and must be observable by the parent mdc-chip-set element (e.g. via DOM event bubbling).

`MDCChipSetAdapter`

Method Signature	Description
`hasClass(className: string) => boolean`	Returns whether the chip set element has the given class
`removeChipAtIndex(index: number) => void`	Removes the chip with the given `index` from the chip set
`selectChipAtIndex(index: string, selected: boolean, shouldNotifyClients: boolean) => void`	Calls `MDCChip#setSelectedFromChipSet(selected)` on the chip at the given `index`. Will emit a selection event if called with `shouldNotifyClients` set to `true`. The emitted selection event will be ignored by the `MDCChipSetFoundation`.
`getIndexOfChipById(id: string) => number`	Returns the index of the chip with the matching `id` or -1
`focusChipPrimaryActionAtIndex(index: number) => void`	Calls `MDCChip#focusPrimaryAction()` on the chip at the given `index`
`focusChipTrailingActionAtIndex(index: number) => void`	Calls `MDCChip#focusTrailingAction()` on the chip at the given `index`
`isRTL() => boolean`	Returns `true` if the text direction is RTL
`getChipListCount() => number`	Returns the number of chips inside the chip set
`removeFocusFromChipAtIndex(index: number) => void`	Calls `MDCChip#removeFocus()` on the chip at the given `index`
`announceMessage(message: string) => void`	Announces the message via an `aria-live` region

Foundations: `MDCChipFoundation` and `MDCChipSetFoundation`

`MDCChipFoundation`

Method Signature	Description
`isSelected() => boolean`	Returns true if the chip is selected
`setSelected(selected: boolean) => void`	Sets the chip's selected state
`setSelectedFromChipSet(selected: boolean, shouldNotifyClients: boolean) => void`	Sets the chip's selected state (called from the chip set) to the `selected` param. Will emit a selection event if called with `shouldNotifyClients` set to `true`. The emitted selection event will be ignored by the `MDCChipSetFoundation`.
`getShouldRemoveOnTrailingIconClick() => boolean`	Returns whether a trailing icon click should trigger exit/removal of the chip
`setShouldRemoveOnTrailingIconClick(shouldRemove: boolean) => void`	Sets whether a trailing icon click should trigger exit/removal of the chip
`getDimensions() => ClientRect`	Returns the dimensions of the chip. This is used for applying ripple to the chip.
`beginExit() => void`	Begins the exit animation which leads to removal of the chip
`handleInteraction(evt: Event) => void`	Handles an interaction event on the root element
`handleTransitionEnd(evt: Event) => void`	Handles a transition end event on the root element
`handleTrailingIconInteraction(evt: Event) => void`	Handles an interaction event on the trailing icon element
`handleKeydown(evt: Event) => void`	Handles a keydown event on the root element
`removeFocus() => void`	Removes focusability from the chip

`MDCChipFoundation` Event Handlers

When wrapping the Chip foundation, the following events must be bound to the indicated foundation methods:

Events	Element Selector	Foundation Handler
`click`, `keydown`	`.mdc-chip` (root)	`handleInteraction()`
`click`, `keydown`	`.mdc-chip__icon--trailing` (if present)	`handleTrailingIconInteraction()`
`transitionend`	`.mdc-chip` (root)	`handleTransitionEnd()`
`keydown`	`.mdc-chip` (root)	`handleKeydown()`

`MDCChipSetFoundation`

Method Signature	Description
`getSelectedChipIds() => ReadonlyArray<string>`	Returns an array of the IDs of all selected chips
`select(chipId: string) => void`	Selects the chip with the given id
`handleChipInteraction(detail: MDCChipInteractionEventDetail) => void`	Handles a custom `MDCChip:interaction` event on the root element
`handleChipSelection(detail: MDCChipSelectionEventDetail) => void`	Handles a custom `MDCChip:selection` event on the root element. When `chipSetShouldIgnore` is true, the chip set does not process the event.
`handleChipRemoval(detail: MDCChipRemovalEventDetail) => void`	Handles a custom `MDCChip:removal` event on the root element
`handleChipNavigation(detail: MDCChipNavigationEventDetail) => void`	Handles a custom `MDCChip:navigation` event on the root element

`MDCChipSetFoundation` Event Handlers

When wrapping the Chip Set foundation, the following events must be bound to the indicated foundation methods:

Events	Element Selector	Foundation Handler
`MDCChip:interaction`	`.mdc-chip-set` (root)	`handleChipInteraction`
`MDCChip:selection`	`.mdc-chip-set` (root)	`handleChipSelection`
`MDCChip:removal`	`.mdc-chip-set` (root)	`handleChipRemoval`
`MDCChip:navigation`	`.mdc-chip-set` (root)	`handleChipNavigation`

6.0.0 (2020-04-22)

Bug Fixes

auto-init: Fixed issue with multiple default exports (#5464) (8ddd5c6)
button: Fix outline & ink color according to spec guidance (#5268) (ee1a68c)
button: Fixed parameter default value in height mixin (#5244) (b0cecf1)
checkbox: change checkbox event type from change to click and add some logic for IE browser (#5316) (2e491de), closes #4893
checkbox: Disabled state colors in IE11 high contrast mode (#5263) (d6a1d4b)
checkbox: Replace unique-id with custom color hash functio… (#5404) (7be9e4a)
checkbox: update disabled color values (#5209) (821871e)
checkbox: Use secondary and on-secondary as default colors (b95172e), closes #5730
chips: .d.ts file generated with syntax error (d154836)
chips: .d.ts file generated with syntax error (#5577) (98f7faa)
chips: Do not throw error if chip set becomes empty (#5290) (f978109)
chips: Fix browser back nav in FF when removing chip with… (#5537) (a1a0deb)
chips: Handle IE/Edge specific key names in keyboard navigation logic (3657f88)
chips: Move touch target inside primary action (ad3bbf7)
circular-progress: Add .npmignore file to ignore typescript files when publishing (#5801) (f172b0f), closes #5800
circular-progress: fix determinate transition typo & 4 color keyframes (a301636)
circular-progress: Fix naming in package.json and add to jsBundleFactory (86f7cad)
circular-progress: Force LTR layout (6a40ef2)
circular-progress: Switch mixins import to [@use](https://github.com/use) (098ae32)
core: Fix canary release by excluding test files from default tsconfig (#5317) (c916008)
data-table: change svg attribute name viewbox to viewBox (#5483) (#5493) (f3adce8)
data-table: Fix pagination box height (eb28b6e)
data-table: Fixed default feature targeting query params of sort mixins (e33c49e)
data-table: Hover styles for sortable header cell (d580805)
data-table: Reverse the arrow direction icon for column sorting (a7c827f)
data-table: unable to redefine colors in class-based themi… (#5751) (4d48051)
data-table: unable to redefine colors in class-based theming (4b45b66)
dialog: Move aria roles from dialog root to dialog surface… (#5239) (c704b71)
elevation: Update overlay color mixin (#5331) (b723dfa)
fab: Add missing dep to fab package.json. (#5236) (e0f6fd9)
fab: Add overflow: visible to make touch target visible in… (#5241) (5850080)
fab: Adjust fab line-height (#5254) (525989b)
fab: Adjust fab line-height to center text (#5258) (591a6ad)
floatinglabel: Estimate hidden scroll width (#5448) (981ec9b)
linear-progress: Temporary rollback of #5656 while updating downstream dependencies (9cf5e98)
linear-progress: support aria attributes (#5248) (7084b40), closes #5248
list: Ensure disabled colors apply to primary and secondary text (#5322) (878a08b)
list: No longer emits action event when disabled item selected (f352d03), closes #5571
menu-surface: Use margin_to_edge as a viewport margin in calculations for autopositioning. (4b04cdb)
menusurface: open and closed events not fired when already opened or closed (9cff431)
menusurface: synchronous quick menu does not close on button click (45a6615)
notched-outline: Restore component test (#5449) (4269133)
radio: update disabled color values (#5210) (491fddc)
select: Deduplicate change events (4ad1274), closes #5570
select: Do not fire change event on programmatic change (#5255) (ec72968)
select: Fix notch outline width when floating (#5319) (1c494e5)
slider: slider track not visible (#5512) (f2426d2)
slider: two change events fired on each up (d10412c)
slider: use secondary custom property color for slider container (#5132) (aa8e43e)
slider: Visual bug when slider value is displayed as "-0" (3fc3ab5)
snackbar: add explicit width for label to wrap in ie11 (#5497) (cd49033)
snackbar: adjust mixins to meet spec (#5477) (f16f15b)
switch: add transform transition to switch control to avoid overflow-x issues (8c11ea2)
switch: always set track to transparent border (9a169f4)
switch: fix strict generic checks (7f5e0c2)
switch: handle aria-checked correctly. (#5202) (#5357) (d245a1a)
switch: set track border to be transparent (#5323) (397905b)
switch: use CSS custom properties for theming (d6315ef)
testing: Revert change from #5299. (#5324) (5fb62be)
textfield: add placeholder mixins and fix disabled colors (#5360) (0a40ced)
textfield: add separate classes for leading/trailing icons (#5367) (70c708d)
textfield: change root element to <label> (#5439) (d8d9502)
textfield: clean up input padding (8639c26)
textfield: hide filled-variant floating label at <52px (#5553) (5ff3380)
textfield: IE11 label overlapping placeholder (781434a)
textfield: incorrect mixin forward path (#5554) (3e782d8)
textfield: move ripple to separate element (c541ebe)
textfield: outlined trailing icon's position (#5496) (93e2288)
textfield: prevent placeholder styles from collapsing with minifiers (d07c78d)
add missing SASS dependencies (#5337) (d2ae6e1)
textfield: remove absolute positioning from icons (1e13d1d)
textfield: remove deprecated dense variant in favor of density (776291e), closes #4142
textfield: use correct disabled colors for IE11 high contrast (5353985)
Remove edge detection for CSS custom properties (#5264) (fe444ac)
server-side rendering errors in linear progress and slider (7d0b983)

Code Refactoring

migrate to the Sass module system (#5453) (faa9af3)
grid-list: Deprecate component (#5499) (cf33f11)
linear-progress: Restructure buffer DOM to allow translucent buffer (98b8434)
linear-progress: Restructure buffer DOM to allow translucent buffer (9372e49)
select: Fix alignment issues, upgrade anchor to interactive element (28d10a9), closes #5428
touchtarget: Rename mdc-touch-target-component => mdc… (#5245) (afe0dd1)

Features

button: Add disabled state color mixins (#5232) (b5eb51e)
button: Add overflow ellipsis mixin (#5352) (47949b0)
button: Expand outlined touch target to include side borders (ce6cb70)
button: Setup elevation overlay (#5256) (3cbee6d)
card: Add elevation overlay structure (#5282) (aa0eba4)
checkbox: Add support for checkbox CSS-only indeterminate checkbox (b273afa)
chips: Add chips styling (1db5c9f)
chips: Add elevation overlay structure (#5279) (3e560b3)
chips: Add focus{in|out} handlers (10af6cf)
chips: Add keyCode support (82fa986)
chips: Add trailing action feature targeting test (bec0659)
chips: Announce when chips are removed (b3f70eb)
chips: Consolidate interaction event handlers (#5251) (5729943)
chips: Create trailing action business logic (9ebee4c)
chips: Expose trailing action chip files (6b48781)
chips: Restructure trailing action mixins (05f5e15)
circular-progress: Add foundation methods to get isDeterminate and progress value (7d8f9c8)
circular-progress: Add Sass styles and tests (bd33cb5)
circular-progress: Add TS for foundation, adapter, component with tests (548b1d4)
data-table: Add base styles to support pagination. (927fa90)
data-table: Add foundation methods to support loading state. (e75deb8)
data-table: Added styles for table in loading state (35a32aa)
data-table: Added styles to support column sorting. (17b9699)
data-table: Foundation changes to support column sorting (6ee0355)
data-table: Set progress indicator styles based on table body height (c026422)
dialog: Add elevation overlay structure (#5283) (b8bc4a2)
dom: Add focus trap utility. (#5505) (63f357d)
dom: Add keyboard support (5f24faa)
dom: Create announcer utility (32c1df1)
elevation: Add elevation overlay mixins (#5249) (b4cfdc4)
elevation: Update elevation mixins (#5304) (ba879b6)
fab: Add elevation overlay structure (#5278) (e89750d)
fab: Add outline in high-contrast mode (deda86d)
fab: Add support for increased touch target to mini FAB. (#5231) (0c4d8f3)
floating-label: add feature targeting for styles (#5287) (b240bcc)
form-field: Add support for space-between (e84b9c8), closes #5747
formfield: add nowrap class/prop to MDC/MWC (c4b4bba)
icon-button: Add disabled state color mixins (#5246) (7161170)
iconbutton: Add icon button variant which supports toggling aria label. (f838c6e)
line-ripple: add active/inactive states to line-ripple (b6c7f62)
line-ripple: add feature targeting for styles (#5292) (391674a)
linear-progress: Add foundation methods to fetch progress and determinate state. (4dc45af)
menu: Add elevation overlay structure (#5280) (7fd17ce)
menu: Add mixin to flatten menu top when opened-below anchor (1e17c49)
menu-surface: Add support for flipping menu corner horizontally. (7b44824)
notched-outline: add feature targeting for styles (#5289) (c483774)
progress-indicator: Add common interface for progress indicators (#5564) (ea863cb)
ripple: Reorganize ripple opacities (008c4d3)
switch: Add elevation overlay structure (#5281) (50f110a)
switch: Restructure DOM (#5312) (0ec1fab)
text-field: Add disabled state color mixins (#5208) (66299b6)
text-field: add feature targeting for styles (#5378) (e8a9936)
text-field: Truncate floating label width w/ icons (c141801)
textfield: add end-alignment (#5356) (847dd1a)
textfield: add filled class variant (b70bc60)
textfield: add forced LTR input (490fbdc)
textfield: add prefix and suffix (6601d24), closes #1892
Add index stylesheets to each MDC Web package (#5539) (1814866)
Add index stylesheets to mdc-image-list and mdc-layout-gr… (#5546) (3a85313)
Use @use syntax in material-components-web Sass file and… (#5573) (b4727e4)
textfield: add specific label-floating class (a88c8e4)
textfield: allow character counter to be moved outside of the textarea. (84e7ed5)
textfield: Create float transition mixin (ca61b65)
textfield: Limit notched outline max-width (0ab62a6)
typography: add container baseline mixins for flexbox (69edc6e)

Reverts

Revert "feat(switch): Add elevation overlay structure (#5281)" (#5329) (1fbf5bd), closes #5281 #5329
"fix(checkbox): change checkbox event type from change to click and add some logic for IE browser" (ba30399)
feat(chips): Consolidate interaction event handlers (#5251) (#5301) (5e45d77)
fix(chips): Do not throw error if chip set becomes empty (#5300) (d10e8cd)
fix(select): Do not fire change event on programmatic change (#5255) (#5302) (ad9dfe7)

BREAKING CHANGES

select: HTML Markup significantly changed, see README; REMOVED adapter methods isSelectedTextFocused, getSelectedTextAttr, setSelectedTextAttr; ADDED adapter methods isSelectAnchorFocused, getSelectAnchorAttr, setSelectAnchorAttr; removed variables outlined-dense-label-position-y, icon-padding; added variables minimum-height-for-filled-label, filled-baseline-top, selected-text-height, anchor-padding-left, anchor-padding-left-with-leading-icon, anchor-padding-right.
text-field: Redundant mixins mdc-text-field-textarea-fill-color, mdc-text-field-textarea-stroke-color, mdc-text-field-fullwidth-bottom-line-color removed. Instead, use mdc-text-field-fill-color, mdc-text-field-outline-color, and mdc-text-field-bottom-line-color respectively to achieve the same effect.
textfield: mdc-text-field--dense and associated mixins/variables have been removed. Use the density() mixin instead.
textfield: removed the following variables: $input-padding, $input-padding-top, $input-padding-bottom, $outlined-input-padding-top, $outlined-input-padding-bottom, $input-border-bottom
linear-progress: DOM for linear progress buffer changed. MDCLinearProgressAdapter method getBuffer, getPrimaryBar, setStyle removed. MDCLinearProgressAdapter method setBufferBarStyle, setPrimaryBarStyle added.
linear-progress: DOM for linear progress buffer changed. MDCLinearProgressAdapter method getBuffer, getPrimaryBar, setStyle removed. MDCLinearProgressAdapter method setBufferBarStyle, setPrimaryBarStyle added.
typography: typography.baseline-top() and typography.baseline-bottom() are now private. Use typography.baseline() for containers and typography.text-baseline() for text with $top and $bottom params.
chips: The touch target and text now appear inside the primary action element. Please see the readme for markup changes.
textfield: filled text fields must include a <div class="mdc-text-field__ripple"></div>
textfield: Filled textfields will no longer show a floating label at certain densities. This can be overridden by setting $mdc-text-field-minimum-height-for-filled-label: 40px
chips: Both MDCChipAdapter and MDCChipSetAdapter have new methods. MDCChipSetFoundation event handlers now accept the corresponding chip event detail interface as the sole argument. The root property has been removed from the MDCChipRemovalEventDetail interface.
line-ripple: mdc-line-ripple-color() mixin has been renamed to mdc-line-ripple-active-color()
textfield: Default textfields must now specify mdc-text-field--filled. Disabled outlined textfields no longer have a shaded background. Height mixin no longer specifies a baseline override, use typography's baseline-top mixin.
Four variables and a mixin in mdc-textfield were renamed to use a mdc-text-field- prefix when depended on via @import (formerly mdc-required-text-field-label-asterisk_, now required-label-asterisk_).
textfield: icons must use .mdc-text-field__icon--leading or .mdc-text-field__icon--trailing classes. mdc-text-field-icon-color() mixin has been split into mdc-text-field-leading-icon-color() and mdc-text-field-trailing-icon-color().
switch: Added setNativeControlAttr method in mdc-switch adapter.
checkbox: remove event listener for 'change' and add event listener for 'click'.

Add handleClick() method in foundation to handle click event.
Add setCheck() method into component to change check status.

switch: Switch DOM structure has changed. See switch README for details
button: Variable $mdc-button-disabled-container-fill-color renamed to $mdc-button-disabled-container-color.
Removed $edgeOptOut option from mdc-theme-prop() Sass mixin.
chips: the handleInteraction and handleTrailingIconInteraction handlers have been removed from the MDCChipFoundation. The handleClick handler has been added to the MDCChipFoundation
Adds new adapter methods to MDCLinearProgressAdapter.
elevation: Functions moved into the _functions.scss file
touchtarget: Renames mixin from mdc-touch-target-component => mdc-touch-target-margin
grid-list: Per the deprecation notice for grid-list, this component has been removed from MDC-Web. Some of its functionalities are available in the MDC Image List package instead. It is recommended that you migrate to the mdc-image-list package to continue to receive new features and updates.

Keywords

FAQs

What is @material/chips?

Is @material/chips popular?

Is @material/chips well maintained?

Package last updated on 23 Apr 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@material/chips

Chips

Design & API Documentation

Installation

Basic Usage

HTML Structure